<template>
    <div class="main-box">
      <div class="content">
        <div class="title">
          <h1>2023年投票须知</h1>
        </div>
        <strong>重点工作</strong>
        <p>
          根据院所年度重点工作目标完成情况进行量化打分。完成年度重点工作，且完成质量很好，按照 100%计分;完成质量较好，按照 75%计分;基本完成，按照 50%计分;未完成，按照 25%计分。
        </p>
        <strong>工作进展</strong>
        <p>
          根据科研业务工作符合院、所和学科研究平台发展规划，参与“10 大科学选题”“10 大核心关键技术”“10 大发展案例”“10 大知识共享范例”取得进展，培育和策划重大(要)项目成果平台等情况进行量化打分。科研业务工作符合发展规划、取得突破性进展 、牵头培育和策划重大(要)项目成果平台，按照 100%计分;符合发展规划、取得实质性进展，参与培育和策划重大 (要)项目成果平台按照 75%计分;符合发展规划，按照50%计分;不符合发展规划，按照 25%计分。
        </p>
        <strong>工作协同</strong>
        <p>
          根据承接和完成部、省、院、所各项与科技相关的任务工作，按要求及时报送各类纸质、电子材料，参与院所组织的学术交流活动等情况进行量化打分。工作协同情况很好按照 100%计分;较好，按照 75%计分;一般，按照 50%计分;较差，按照 25%计分。
        </p>
        <strong>团队建设</strong>
        <p>
          根据团队建设情况进行量化打分。从团队目标明确、成员分工协作、团队内部学术交流等方面综合评价，团队建设情况很好，按照 100%计分;较好，按照 75%计分;一般,按照 50%计分;较差，按照 25%计分。
        </p>
      </div>
      <div class="bottom">
        <van-button type="primary" class="button" @click="vote()">开始投票</van-button>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "home",
    data() {
      return {}
    },
    methods: {
      vote(){
        this.$router.push(
          {
            path:'/vote',
            query:{
              data: this.$route.query.data
            }
          }
        )
      },
      getPing(){

        if(this.$route.query.switch){
          return;
        }
        this.$axios.vote.ping({}).then((res) => {
          if(res.data && res.data.data){
            // window.location.href='http://127.0.0.1:6003?switch=true&data='+this.$route.query.data;
            // window.location.href='http://59.50.66.62:8081/voteisti/votes?switch=true&data='+this.$route.query.data;
            window.location.href='http://10.105.23.34:8081/voteisti/votes?switch=true&data='+this.$route.query.data;
          }
          
        })
      },
      getUserIP(onNewIP) {
        const MyPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection
        const pc = new MyPeerConnection({
          iceServers: []
        })
        const noop = () => {
        }
        const localIPs = {}
        const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g
        const iterateIP = (ip) => {
          if (!localIPs[ip]) onNewIP(ip)
          localIPs[ip] = true
        }
        pc.createDataChannel('')
        pc.createOffer().then((sdp) => {
          sdp.sdp.split('\n').forEach(function(line) {
            if (line.indexOf('candidate') < 0) return
            line.match(ipRegex).forEach(iterateIP)
          })
          pc.setLocalDescription(sdp, noop, noop)
        }).catch((reason) => {
        })
        pc.onicecandidate = (ice) => {
          if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return
          ice.candidate.candidate.match(ipRegex).forEach(iterateIP)
        }
      },
      getLocalIp(){
        const interfaces = os
        for (const devName in interfaces) {
          const iface = interfaces[devName]
          for (let i = 0; i < iface.length; i++) {
            const alias = iface[i]
            if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
              console.log('---->', alias.address)
              return alias.address
            }
          }
        }
      }
    },
    computed: {
    },
    mounted() {
      this.getUserIP((ip) => {
        this.ip = ip;
        console.log(ip)
      });
    },
    created() {
      this.getPing();
      // this.checkVote();
      // this.getUserIP((ip) => {
      //   this.ip = ip;
      //   console.log(ip)
      // });
    },
  };
  </script>
  <style lang="scss">
  .container{
    height: auto;
  }
  .main-box{
    background-color: #1e68b4 !important;
    background-image: url(../assets/images/tipsbg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    padding: 0 0 6rem 0;
  }
  .content{
    padding: 0 1rem;
    strong{
      font-weight: 700;
      font-size: 1.25rem;
      color: #FFF;
      padding: .5rem 0;
      display: block;
    }
    p{
      padding: .25rem 0;
      font-size: 0.875rem;
      color: #FFF;
    }
    .title{
      background-image: url(../assets/images/titleline.png);
      background-repeat: no-repeat;
      background-position: bottom center;
      background-size: 100%;
      padding-bottom: .5rem;
      margin-bottom:1rem;
      h1{
        text-align: center;
        font-size: 1.5rem !important;
        color: #FFF;
      }
    }
  }
  .bottom{
    text-align: center;
    display: block;
    padding: 3rem 0 5rem 0;
    .button{
      background-color: #005bb1 !important;
      border: 1px solid #FFF !important;
      border-radius: 1.5rem;
      padding: 0 2rem;
      // font-weight: 700;
      .van-button__text{
        font-weight:700;
      }
    }
  }
  .head-box{
    background-color: transparent !important;
    background-image: url('../assets/images/head-bg-1.png');
    background-repeat: no-repeat;
    background-position: center -2.5rem;
    margin: 0 auto;
    height: 34.25vh;
    background-size: 100%;
    display: flex;
    justify-content: center;
    // align-items: center;
    strong{
      color: rgba(255, 255, 255, .8);
      // font-weight: 700;
      font-size: 2.5rem;
      margin-top: 2.5rem;
    }
    .pic{
      width: 5rem;
      height: 5rem;
      margin-top: 1.25rem;
    }
  }
  .content-box{
    background-color: #FFF;
    box-shadow: 0 0 5px -4px #000;
    border-radius: 0.625rem;
    min-height: 18.75rem;
    margin-top: -5rem !important;
    margin: -5rem 1.875rem 0 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tips-box{
      width: 8.75rem;
      height: 8.75rem;
      border-radius: 50%;
			box-shadow: 0 5px 5px -4px #000;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: -3.125rem;
      background-color: #FFF;
      font-size: $wdr-oneTitle-fontSize;
      font-weight: 700;
      color: $wdr-main-color;
      .pic{
        width: 6rem;
        height: 6rem;
      }
    }
    .count-down{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      strong{
        font-size: $wdr-oneTitle-fontSize;
        font-weight: 700;
        margin: 1.875rem 0 0.625rem 0;
        color: red;
      }
      .van-count-down{
        font-size: $wdr-threeTitle-fontSize;
        color: #999;
      }
    }
  }
  </style>